<main id="content-container" class="container" role="main">
  <div class="row" style="margin-top:20px;">

    <div class="col-md-10 col-md-offset-1 well bg-dark" style="min-height:600px;">
      <% if @fighter.user == current_user %>
        <% if @fighter.avatar.blank? or @fighter.poster.blank? %>
          <div class="alert alert-info">
            <a class="close" data-dismiss="alert">&times;</a>
            <strong><%= @fighter.nickname.upcase %>!</strong> To complete fighter's profile, click on the images to upload avatar and poster.
          </div>
        <% end %>
      <% end %>

      <div class="col-md-12" style="margin-top:30px; margin-bottom:30px;">

        <div class="media" style="color: white;">
          <% if @fighter.user == current_user %>
            <%= link_to image_tag(fighter_poster_url(@fighter), :class=>"media-object img-thumbnail img-poster"), 
              '#modal-poster', :class=>"pull-left", :role => 'button', 'data-toggle'=>'modal' %>
          <% else %>
            <div class="pull-left">
              <%= image_tag(fighter_poster_url(@fighter), :class=>"media-object img-thumbnail img-large") %>
            </div>
          <% end %>
          <div class="media-body">
            <h3 class="media-heading red"><strong><%= @fighter.nickname.upcase %></strong></h3>
            <h2 class="media-heading"><%= @fighter.name.upcase %></h2>
            <p><strong>13-2-2 (W-L-D)</strong></p>
            <p>Blood: <%= @fighter.points %></p>
            <p>Stars: <%= @fighter.level %></p>
            <p>Badges:</p>
            <ul>
              <% @fighter.badges.each do |badge| %>
                <li><%= badge.name %></li>
              <% end %>
            </ul>
            
          </div>
        </div>

        <h4 class="page-header grey bd-grey">Fighter Info</h4>


        <div class="media" style="color: white;">
          <% if @fighter.user == current_user %>
            <%= link_to image_tag(fighter_avatar_url(@fighter), :class=>"media-object img-thumbnail img-avatar"), 
              '#modal-avatar', :class=>"pull-left", :role => 'button', 'data-toggle'=>'modal' %>
          <% else %>
            <div class="pull-left">
              <%= image_tag(fighter_avatar_url(@fighter), :class=>"media-object img-thumbnail img-mid") %>
            </div>
          <% end %>
          <div class="media-body">
            <p>Joined: <%= @fighter.created_at.strftime('%Y-%m-%d') %></p>
            <p>Age: <%= age(@fighter.born)%></p>
            <p>Height: <%= @fighter.height %></p>
            <p>Weight: <%= @fighter.weight %> lbs</p>
            <p>Resides: <%= @fighter.city%></p>
            <p>Ladder: N/A</p>
            <p>Current Rank: 8</p>
            <p>Highest Rank: 3</p>

          </div>
        </div>

        <h4 class="page-header grey bd-grey">Skill Breakdown</h4>

        <div id='chart'></div>
        <%= render_chart @chart, 'chart' %>
        
        <h4 class="page-header grey bd-grey">Fight History</h4>



      </div>
    </div>

  </div>
</main>

<% if @fighter.user == current_user %>
<!-- Upload Avatar Modal -->
<div class="modal fade" id="modal-avatar" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <%= form_for @fighter do |f| %>
      <% %w[img x y w h].each do |attribute| %>
        <%= f.hidden_field "crop_#{attribute}", :id => "avatar_crop_#{attribute}" %>
      <% end %>

      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Upload new avatar</h4>
        </div>
        
        <div class="modal-body" style="overflow:auto;">
          <div id="spinner-holder-avatar" class="spinner-holder" style="top:94px;left:200px;">
          </div>
          <div>
            <span id="avatar-spinner" style="position: absolute;display: block;top: 50%;left: 50%;"></span>
          </div>
          
          <div class="fileinput fileinput-new" data-provides="fileinput" style="float:left;">
            <div class="fileinput-preview thumbnail" style="width: 390px; height: 300px;">
            </div>
            
            <div>
              <span class="btn btn-default btn-file">
                <span class="fileinput-new">Select image</span>
                <span class="fileinput-exists">Change</span>
                <%= f.file_field(:avatar) %>
              </span>
              <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
            </div>
          </div>
          <div style="float:left;width:160px;height:200px;overflow:hidden;margin-left:5px;margin-top:50px;">
            <img src="" id="avatar-preview">
          </div>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          <%= f.submit "Save changes", :class => "btn btn-primary", :id => "avatar-save" %>
        </div>

      </div>
    <% end %>
  </div>
</div>

<!-- Upload Poster Modal -->
<div class="modal fade" id="modal-poster" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg">
    <%= form_for @fighter do |f| %>
      <% %w[img x y w h].each do |attribute| %>
        <%= f.hidden_field "crop_#{attribute}", :id => "poster_crop_#{attribute}" %>
      <% end %>

      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Upload new poster</h4>
        </div>
        
        <div class="modal-body" style="overflow:auto;">
          <div id="spinner-holder-poster" class="spinner-holder" style="top:154px;left:350px;">
          </div>
          <div>
            <span id="poster-spinner" style="position: absolute;display: block;top: 50%;left: 50%;"></span>
          </div>

          <div class="fileinput fileinput-new" data-provides="fileinput" style="float:left;">
            <div class="fileinput-preview thumbnail" style="width: 500px; height: 350px;">
            </div>
            
            <div>
              <span class="btn btn-default btn-file">
                <span class="fileinput-new">Select image</span>
                <span class="fileinput-exists">Change</span>
                <%= f.file_field(:poster) %>
              </span>
              <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
            </div>
          </div>
          <div style="float:left;width:350px;height:228px;overflow:hidden;margin-left:5px;margin-top:60px;">
            <img src="" id="poster-preview">
          </div>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          <%= f.submit "Save changes", :class => "btn btn-primary", :id => "poster-save" %>
        </div>

      </div>
    <% end %>
  </div>
</div>
<% end %>
